<template>
  <div>
    <slot name="page-top" />
    <component :is="currentTemplate" :id="id" ref="tpl" :page-info="pageInfo" :code="code">
      <slot />
    </component>
    <slot name="page-bottom" />
  </div>
</template>
<script>
import {
  T1101,
  T1102,
  T1110,
  T1111,
  T1120,
  T1130,
  T1140,
  T1150,
  T1160,
  T1170,
} from '../Templates/index'
import {
  getPageInfo
} from '@admin/api/common'
import baseVue from './baseVue'
import LoadingPage from '../loading-page'
import CDPlugin from '@admin/plugins/cd'
// 临时存储父页面数据
const pPage = {
  code: ''
}
export default {
  name: 'CommonPage',
  components: {
    Tem1101: T1101,
    Tem1102: T1102,
    Tem1110: T1110,
    Tem1111: T1111,
    Tem1120: T1120,
    Tem1130: T1130,
    Tem1140: T1140,
    Tem1150: T1150,
    Tem1160: T1160,
    Tem1170: T1170,
    LoadingPage: LoadingPage
  },
  extends: baseVue,
  provide() {
    return {
      commonPage: this
    }
  },
  props: {
    ccode: { type: String, default: '' },
    id: { type: String, default: '' },
    isTabPage: { type: Boolean, default: false },
  },
  data() {
    return {
      pageInfo: {},
      routeCode: this.$route.meta.code
    }
  },
  computed: {
    isLoading: function() {
      return this.$store.state.page.requestPending
    },
    currentTemplate: function() {
      if (this.templatecode) {
        return 'tem' + this.templatecode
      }
      return 'LoadingPage'
    },
    code: function() {
      return this.ccode || this.routeCode
    },
    templatecode: function() {
      return this.pageInfo.tmp
    }
  },
  watch: {
    pageInfo: {
      deep: true,
      handler: function(value) {
        this.$store.dispatch('page/setPageInfo', value)
      }
    },
    isLoading: function(newvalue) {
      if (newvalue) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.4)'
        })
      } else {
        this.loadingInstance.close()
      }
    }
  },
  beforeCreate: function() {
    /**
     * 生命周期
     * 0 新页面beforeCreated
     * 1 新页面creted 获取旧页面code，弹框页面需要关闭后还原code
     * 2 新页面beforemount
     * 3 旧页面beforedestory 调用_unset方法销毁页面,可能会还原$CD
     * 4 旧页面destoryed
     * 5 新页面mounted 重新设置$CD
     */
    // 父code，用来加载页面code
    pPage.code = window?.$CD?.code || ''
    // 初始化$CD
    window.$CD = {
      pageInfo: {},
      treeId: '',
      treeInfo: {},
      code: '',
      pcode: '',
      pageId: '',
      callback: {},
      fieldEvent: {}, // 自定义事件
      fieldRule: {}, // 自定义规则
      fieldAttr: {} // 自定义属性
    }
  },
  mounted: function() {
    window.$CD.pcode = pPage.code
    if (!this.code) {
      this.$message({
        type: 'warning',
        message: '模板code不存在'
      })
    } else {
      this.initPageInfo()
    }
  },
  activated: function() {
    console.warn('commonpage activated')
    CDPlugin._reset(this.code)
    this.$refs.tpl && (typeof this.$refs.tpl.onActivated === 'function') && this.$refs.tpl.onActivated()
  },
  deactivated: function() {
    console.warn('commonpage - deactivated')
    // CDPlugin._unset({ code: this.code, pcode: pPage.code })
  },
  beforeDestroy: function() {
    CDPlugin._unset({ code: this.code, pcode: pPage.code })
  },
  methods: {
    initPageInfo() {
      const menus = this.$store.state.permission.menus
      const pageId = this.code || ''
      const pageName = menus.find(i => i.id === this.code)?.name || ''
      window.$CD.code = this.code
      window.$CD.pageId = pageId
      window.$CD.pageName = pageName
      const param = {
        pageId: pageId
      }
      getPageInfo(param).then((res) => {
        this.pageInfo = res.data
        window.$CD.pageInfo = this.pageInfo
        CDPlugin._set(window.$CD)
        this.$emit('pageInfoLoaded', this.pageInfo)
      })
    },
    // 还原全局变量
    restoreGlobal() {
      window.$CD.code = this.code
      const pageId = this.code
      const pageName = this.pageInfo.name
      window.$CD.pageId = pageId
      window.$CD.pageName = pageName
      window.$CD.pageInfo = this.pageInfo
      this.$store.dispatch('page/setPageInfo', this.pageInfo)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
